<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />\
		<style type="text/css">
			body{
				background:#F8F8F8;
			}
			.delete{
				float: right;
				padding-top: 10px;
				font-size:17px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(255,255,255,1);
			}
			a , .mui-title{
				color:rgba(255,255,255,1);
			}
			.mui-bar{
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
			}
			.mui-content{
				background:#F8F8F8;
			}
			.choice{
				width: calc(96% - 15px);
				margin-left: 15px;
				height: 148.5px;
				background:rgba(255,255,255,1);
				box-shadow:0px 3px 16px 0px rgba(215, 215, 215, 0.35);
				border-radius:10px;
				position: relative;
				float: left;
				margin-bottom: 25px;
			}
			.details{
				width: 100%;
				position: relative;
				float: left;
			}
			.details_img{
				width: 40%;
				position: relative;
				float: left;
			}
			.details_img>img{
				width: 90%;
				height: 98.5px;
			}
			.details_p{
				width: 60%;
				position: relative;
				float: left;
			}
			.details_p>p{
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.details_one{
				width: 40%;
				height: 23px;
				background:rgba(248,248,248,1);
				border-radius:3px;
				position: relative;
				float: left;
				line-height: 23px;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.details_one>span{
				font-size:12px;
				font-family:PingFang-SC-Regular;
				font-weight:bold;
				color:rgba(102,102,102,1);
			}
			.details_one>img{
				width:9px;
				height:5px;
			}
			.details_two{
				width: 100%;
				position: relative;
				float: none;
			}
			.details_span{
				width: 30%;
				position: relative;
				float: left;
				margin-top: 15px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.details_span>span:nth-child(1){
				font-size:13px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(254,31,31,1);
			}
			.details_span>span:nth-child(2){
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(254,31,31,1);
			}
			.mui-radio.mui-left input[type='radio'], .mui-checkbox.mui-left input[type='checkbox']{
				left: 10px;
			}
			.mui-radio.mui-left label, .mui-checkbox.mui-left label {
				padding-right: 15px;
				padding-left: 40px;
			}
			.details_inp{
				width: 82px;
				height:25px;
				position: relative;
				float: right;
				margin-top: 12px;
				border:1px solid rgba(196,196,196,1);
				border-radius:2px;
			}
		
			.jian{
				width: 22px;
				height:23px;
				position: relative;
				float: left;
				border: none;
				border-right: 1px solid rgba(196,196,196,1);
				text-align: center;
				line-height: 23px;
				font-size:20px;
			}
			.details_inp>input{
				width: 36px;
				height: 23px;
				position: relative;
				float: left;
				font-size: 12px;
				text-align: center;
				border: none;
			}
			 input[type='number']{
					 padding: 0px 0px;
			 }
			
			.jia{
				width: 22px;
				height:23px;
				position: relative;
				float: left;
				border: none;
				border-left: 1px solid rgba(196,196,196,1);
				text-align: center;
				line-height: 23px;
				font-size:20px;
			}
			.container_payment{
				width: 100%;
				height:49px;
				background:rgba(255,255,255,1);
				position: absolute;
				bottom: 0;
			}
			.payment_check{
				width: 25%;
				line-height: 49px;
				position: relative;
				float: left;
			}
			.payment{
				width: 75%;
				line-height: 49px;
				position: relative;
				float: right;
			}
			.payment_one{
				width: 65%;
				position: relative;
				float: left;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.payment_one>span:nth-child(1){
				font-size:12px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(152,152,152,1);
			}
			.payment_one>span:nth-child(2){
				font-size:16px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
			}
			.payment_one>span:nth-child(3){
				font-size:16px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(254,31,31,1);
				
			}
			.payment_two{
				width: 35%;
				position: relative;
				float: left;
				background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
				height: 49px;
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.payment_two>span{
				font-size:16px;
				font-family:PingFang-SC-Bold;
				font-weight:bold;
				color:rgba(255,255,255,1);
			}
		.mui-checkbox input[type='checkbox']{
			top: 10px;
		}
		.payment_lab{
			font-size:16px;
			font-family:PingFang-SC-Medium;
			font-weight:500;
			color:rgba(102,102,102,1);
		}
		.mui-radio input[type='radio']:checked:before, .mui-checkbox input[type='checkbox']:checked:before {
    color:#FE635F;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车(2)</h1>
			<span class="delete">删除</span>
		</header>
			<div class="mui-content">
				
				<div class="container_payment">
					<div class="mui-input-row mui-checkbox mui-left payment_check ">
					  <label class="payment_lab">全选</label>
					  <input  value="Item 1" type="checkbox" id="checkAll">
					</div>
					<div class="payment">
						<div class="payment_one">
							<span>含运费</span>
							<span>合计:￥</span>
							<span class="heji">220.00</span>
						</div>
						<div class="payment_two">
							<span class="zhifus">确认订单</span>
							<!-- <span>(100)</span> -->
						</div>
					</div>
				</div>
			</div>
			<script src="../js/mui.js"></script>
			<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript">
			mui.plusReady(function(){
				var url = plus.storage.getItem('url');
				var user = plus.storage.getItem('user');
				user = JSON.parse(user);
				$.post(url+'/juyou/shangping/getshoppingcart',{token:user.token},function(res){
					if(res.code==200){
						$(".mui-title").text('购物车('+res.data.length+')');
						var str = '';
						$.each(res.data,function(i,v){
							str +='<div class="choice">'+
					'<div class="mui-input-row mui-checkbox mui-left">'+
					  '<label>'+
						 '<div class="details">'+
							  '<div class="details_img">'+
							 	'<img src="'+v.commodity.tupian+'" alt="">'+
							' </div>'+
							 '<div class="details_p">'+
							 	'<p>'+v.commodity.name+'</p>'+
							' </div>'+
							 '<div class="details_one">'+
								'<span>'+v.commodity.description+'</span>'+
							' </div>'+
							 '<div class="details_two">'+
								 '<div class="details_span">'+
									 '<span>金币:</span>'+
									' <span class="danjia">'+v.commodity.icons+'</span>'+
								' </div>'+
								 '<div class="details_inp">'+
									'<span class="jian">-</span>'+
									'<input type="number" name="" id="" value="1" class="in_valu"/>'+
									'<span class="jia">+</span>'+
								 '</div>'+
							' </div>'+
						 '</div>'+
					  '</label>'+
					 ' <input name="checkbox1" value="Item 1" data-uid="'+v.commodity.id+'" data-id="'+v.id+'" type="checkbox" class="listCheckBox">'+
					'</div>'+
				'</div>';
						})
						$(".mui-content").prepend(str);
						$(".heji").text(0);
						// huoquzhongjia();
						
						
						
						mui.init({
							beforeback: function() {　　　　
							var list = plus.webview.currentWebview().opener();　　　　
								  //refresh是A页面自定义事件
							mui.fire(list, 'wyaoshuaxin');
								 //返回true,继续页面关闭逻辑
							return true;
							},
						});
									
									
									//点击全选
								document.getElementById("checkAll").addEventListener("change",function(){
									var listBox=$("input[name='checkbox1']")
									// console.log(listBox)
									 if (this.checked) {  
						          listBox.each(function() {  
						         var ele = this;  
						        ele.checked=true  
						    })  
						  } else {  
						      listBox.each(function() {  
										 var ele = this;  
										ele.checked=false  
								})  
						}  
						huoquzhongjia()
								})
						//获取当前的总和
						function huoquzhongjia(){
							var zhongnumber = 0;
							var danjiaclass = $(".listCheckBox");
							var num = 0;
							$.each(danjiaclass,function(i,v){
								if(v.checked==true){
									num = parseInt($(v).prev().find('.in_valu').val())*parseFloat($(v).prev().find('.danjia').text());
									// mui.alert(num)
									zhongnumber = zhongnumber+num;
								}
							})
							$('.heji').text(zhongnumber)
							allxuanze();
							
						}
						/**
						 * 检测是否全选
						 */
						function allxuanze(){
							var obj = $(".listCheckBox");
							var bools = true;
							// mui.alert(bools)
							$.each(obj,function(i,v){
								if(v.checked!==true){
									bools = false;
								}
							})
							
							// mui.alert(bools)
							if(bools){
								$("#checkAll").prop('checked',true);
							}else{
								$("#checkAll").prop('checked',false);
							}
						}
						
						//单独点击选择
						mui('.mui-checkbox').on('tap','.listCheckBox',function(){
							setTimeout(function(){
								huoquzhongjia();
							},100)
						})
							
							
							//点击支付
							mui('.payment').on('tap','.payment_two',function(){
								var shangping = [];
								var obj = $(".listCheckBox");
								var id = '';
								var number = '';
								$.each(obj,function(i,v){
									if(v.checked==true){
										id = $(v).attr('data-uid');
										number = $(v).prev().find('.in_valu').val();
										shangping.push({
											id:id,
											number:number
										})
									}
								});
								if(shangping.length==0){
									mui.toast('请选择你要支付的商品');
									return
								}
								// mui.alert(shangping.toString());
								// return
								mui.openWindow({
									url:'order_one.html',
									id:'order_one.html',
									extras: {
									shangpingid:shangping,
									},
									show: {
										autoShow: true, //页面loaded事件发生后自动显示，默认为true
										aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
										duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
									},
									waiting: {
										autoShow: true, //自动显示等待框，默认为true
										title: '正在加载...', //等待对话框上显示的提示内容
									}
								})
								
							})
								
								
								//删除购物车
								mui('.mui-bar').on('tap','.delete',function(){
									var listCheckBox = $(".listCheckBox");
									var newlist = [];
									$.each(listCheckBox,function(i,v){
										if(v.checked==true){
											newlist.push($(v).attr('data-id'));
											// mui.alert($(v).attr('data-id'))
										}
									})
									if(newlist.length==0){
										mui.toast('请选择要删除的商品!!');
										return;
									}
									// mui.alert(newlist.toString());
									mui.confirm('你确定要删除这些吗？','提示',['取消','确定'],function(event){
										if(event.index==1){
											plus.nativeUI.showWaiting();
											$.post(url+'/juyou/shangping/delshoppingcart',{token:user.token,shangpingid:newlist},function(res){
												plus.nativeUI.closeWaiting();
												if(res.code==200){
													mui.toast(res.msg);
													setTimeout(function(){
														window.location.reload();
													},1500)
												}else{
													mui.toast(res.msg);
												}
											})
										}
									})
								})
								
								//点击加减
								//加
								$(".details_inp").on("tap",".jia",function(){
									var num = parseInt($(this).prev().val());
									num = num+1;
									$(this).prev().val(num);
									setTimeout(function(){
										huoquzhongjia();
									},100)
									
									
								})
								
								//减
								$(".details_inp").on("tap",".jian",function(){
									var num = parseInt($(this).next().val());
									if(num>1){
										num = num -1;
										$(this).next().val(num);
									}
									setTimeout(function(){
										huoquzhongjia();
									},100)
									// var heji =parseInt(number)*parseInt(danjia);
									// $(".heji").text(heji);
									// if($(".in_valu").val()<=1){
									// 	$(".in_valu").val("1")
									// }
								})
								
								//改变选择数字
								mui('.details_inp').on('input','input',function(){
									huoquzhongjia();
								})
					}else{
						mui.toast(res.msg);
					}
				})
			})
		</script>
	</body>
	
</html>
